<template>
  <div class="lk-metrics-container">
    <div class="header">
      <h2>LK度量</h2>
      <p>用于分析代码的复杂度、注释密度等指标</p>
    </div>
    <div class="content">
      <!-- 源代码数据卡片 -->
      <div class="result-section" v-if="sourceCodeData">
        <el-card class="result-card">
          <div slot="header">
            <span>源代码分析结果</span>
          </div>
          <div class="result-content">
            <el-table :data="sourceCodeResultData" style="width: 100%"
              :default-sort="{ prop: 'fileName', order: 'ascending' }">
              <el-table-column prop="fileName" label="文件名" width="200" sortable show-overflow-tooltip></el-table-column>
              <el-table-column prop="linesOfCode" label="代码行数" sortable></el-table-column>
              <el-table-column prop="commentLines" label="注释行数" sortable></el-table-column>
              <el-table-column prop="cyclomaticComplexity" label="圈复杂度" sortable></el-table-column>
              <el-table-column prop="commentDensity" label="注释密度" sortable>
                <template v-slot="{ row }">
                  {{ row.commentDensity }}%
                </template>
              </el-table-column>
              <el-table-column prop="cs" label="类规模度量" sortable></el-table-column>
              <el-table-column prop="noo" label="方法重写数" sortable></el-table-column>
              <el-table-column prop="noa" label="增加方法数" sortable></el-table-column>
              <el-table-column prop="si" label="特征化指数" sortable></el-table-column>
            </el-table>

            <!-- 图表切换按钮 -->
            <div class="chart-controls">
              <el-radio-group v-model="currentMetric" @change="updateChart">
                <el-radio-button label="linesOfCode">代码行数</el-radio-button>
                <el-radio-button label="commentLines">注释行数</el-radio-button>
                <el-radio-button label="cyclomaticComplexity">圈复杂度</el-radio-button>
                <el-radio-button label="commentDensity">注释密度</el-radio-button>
                <el-radio-button label="cs">类规模度量</el-radio-button>
                <el-radio-button label="noo">方法重写数</el-radio-button>
                <el-radio-button label="noa">增加方法数</el-radio-button>
                <el-radio-button label="si">特征化指数</el-radio-button>
              </el-radio-group>
            </div>

            <!-- 柱状图 -->
            <div class="chart-container">
              <div ref="barChart" style="width: 100%; height: 400px;"></div>
            </div>
          </div>
        </el-card>
      </div>

      <!-- 当没有数据时显示提示 -->
      <div v-if="!sourceCodeData" class="no-data">
        <el-card class="result-card">
          <div class="no-data-content">
            <i class="fas fa-file-upload"></i>
            <h3>暂无数据</h3>
            <p>请先上传源代码文件以进行分析</p>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'LKMetricsView',
  data() {
    return {
      chart: null,
      currentMetric: 'linesOfCode'
    }
  },
  computed: {
    sourceCodeData() {
      return this.$store.getters.getSourceCodeData;
    },
    sourceCodeResultData() {
      if (!this.sourceCodeData || !this.sourceCodeData.topFiles) return [];
      return this.sourceCodeData.topFiles;
    }
  },
  methods: {
    initChart() {
      if (!this.sourceCodeResultData.length) return;

      const chartDom = this.$refs.barChart;
      this.chart = echarts.init(chartDom);
      this.updateChart();
    },
    updateChart() {
      if (!this.chart) return;

      const fileNames = this.sourceCodeResultData.map(item => item.fileName);
      const metricData = this.sourceCodeResultData.map(item => item[this.currentMetric]);

      const metricNames = {
        linesOfCode: '代码行数',
        commentLines: '注释行数',
        cyclomaticComplexity: '圈复杂度',
        commentDensity: '注释密度(%)',
        cs: '类规模度量',
        noo: '方法重写数',
        noa: '增加方法数量',
        si: '特征化指数'
      };

      const option = {
        title: {
          text: `${metricNames[this.currentMetric]}分布`,
          left: 'center'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: fileNames,
          axisLabel: {
            interval: 0,
            rotate: 30
          }
        },
        yAxis: {
          type: 'value',
          name: metricNames[this.currentMetric]
        },
        series: [
          {
            name: metricNames[this.currentMetric],
            type: 'bar',
            data: metricData,
            itemStyle: {
              color: '#409EFF'
            },
            label: {
              show: true,
              position: 'top',
              formatter: '{c}'
            }
          }
        ]
      };

      this.chart.setOption(option);
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart();
    });
  },
  watch: {
    sourceCodeResultData: {
      handler() {
        this.$nextTick(() => {
          this.initChart();
        });
      },
      deep: true
    }
  },
  beforeDestroy() {
    if (this.chart) {
      this.chart.dispose();
    }
  }
}
</script>

<style scoped>
.lk-metrics-container {
  padding: 20px;
  height: 100%;
  background-color: #ffffff;
  width: 100%;
  box-sizing: border-box;
}

.header {
  margin-bottom: 30px;
}

.header h2 {
  color: #333333;
  margin-bottom: 10px;
}

.header p {
  color: #606266;
}

.content {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}

.result-section {
  margin-top: 20px;
  width: 100%;
}

.result-card {
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  width: 100%;
}

.chart-controls {
  margin: 20px 0;
  text-align: center;
}

.chart-container {
  margin-top: 20px;
  padding: 20px;
  background-color: #fff;
  border-radius: 4px;
}

.no-data {
  margin-top: 20px;
}

.no-data-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px;
  text-align: center;
}

.no-data-content i {
  font-size: 48px;
  color: #909399;
  margin-bottom: 20px;
}

.no-data-content h3 {
  color: #606266;
  margin-bottom: 10px;
  font-size: 18px;
}

.no-data-content p {
  color: #909399;
  font-size: 14px;
}

/* 添加表格样式 */
:deep(.el-table .cell) {
  padding-left: 6px;
  padding-right: 6px;
}

:deep(.el-table th) {
  padding: 6px 0;
}

:deep(.el-table td) {
  padding: 4px 0;
}
</style>